<script setup>
import { onMounted, onUnmounted } from 'vue'
import { OilApp } from "../threeRender/OilApp";
import { addLoading, removeLoading } from "../threeRender/utils/loading";

// 创建一个Oil网格可视化App实例
let oilMeshViewApp = null
let dom = null
let canvas = null
const createCanvas = () => {
    const canvas = document.createElement('canvas');
    canvas.width= window.innerWidth;//画布宽度px
    canvas.height= window.innerHeight;//画布高度px
    canvas.style.background='black';
    return canvas;
}

onMounted(() => {
  addLoading();
  dom = document.querySelector("#webgl-app2");
  canvas = createCanvas();
  dom.appendChild(canvas);
  oilMeshViewApp = new OilApp(canvas);
  // 启动ThreeApp实例
  oilMeshViewApp.render();
})

onUnmounted(()=>{
  // 清理ThreeApp实例
  OilApp.getInstance().clear();
  removeLoading();
})

</script>
<template>
    <div class="card">
      <div id="webgl-app2"></div>
    </div>
</template>